<template>
	<view class="goods-list-container" :class="[options.mode]">
		<tian-title :title="configs.headerTitle" :underLine="configs.headerUnderLine" v-if="configs.withTitle">
		</tian-title>
		<view :class="[options.bgClassName]" class="goods-list-inner" :style="bgStyle" @click="bgClick">
			<scroll-view scroll-x v-if="options.mode=='one_rows'">
				<view class="goods-list ">
					<!-- <view v-for="(item,index) in dataList" :key="index" class="goods" :style="options.style"
						:class="options.itemClassName">
						<tian-goods-image-cover :item="item"></tian-goods-image-cover>
						<image :src="item.goods_thumb" :style="item.goods_style" mode="aspectFill"
							class="image-width-168 goods-image" @click.stop="navToDetail(item)"
							:class="options.imageClassName"></image>
						<view class="goods-content">
							<view class="title text-hide" @click.stop="navToDetail(item)">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view> -->
					<view v-for="(item,index) in dataList" :key="index" class="goods" :style="options.style"
						:class="options.itemClassName">
						<!-- <tian-goods-image-cover :item="item"></tian-goods-image-cover> -->
						<image :src="item.icon" :style="item.goods_style" mode="aspectFill"
							class="image-width-168 goods-image" @click.stop="navToDetail(item)"
							:class="options.imageClassName"></image>
						<view class="goods-content">
							<view class="title text-hide" @click.stop="navToDetail(item)">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x v-if="options.mode=='two_rows'">
				<view class="">
					<text>正在设置中...</text>
				</view>
				<!-- <view class="goods-list ">
					<view v-for="(item,index) in dataList" :key="index" class="goods" :style="options.style"
						:class="options.itemClassName">
						<image :src="item.icon" :style="item.goods_style" mode="aspectFill"
							class="image-width-168 goods-image" @click.stop="navToDetail(item)"
							:class="options.imageClassName"></image>
						<view class="goods-content">
							<view class="title text-hide" @click.stop="navToDetail(item)">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
			<view class="" v-else-if="options.mode=='mode_1_3'">
				<image :src="firstGoods.banner_path" mode="aspectFill" :style="firstGoods.style"
					class="image-width-168 goods-image margin-bottom-20" style="margin: 0 auto;display: block;"
					@click.stop="navToDetail(firstGoods)"></image>
				<scroll-view scroll-x>
					<view class="goods-list ">
						<view v-for="(item,index) in dataList" :key="index" class="goods" :style="options.style"
							:class="options.itemClassName">
							<tian-goods-image-cover :item="item"></tian-goods-image-cover>
							<image :src="item.goods_thumb" :style="item.goods_style" mode="aspectFill"
								class="image-width-168 goods-image" @click.stop="navToDetail(item)"
								:class="options.imageClassName"></image>
							<view class="goods-content">
								<view class="title text-hide" @click.stop="navToDetail(item)">
									<text>{{item.name}}</text>
								</view>
								<tian-goods-price :hasCart="item.hasCart" :value="item" @click="openSku(item)">
								</tian-goods-price>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	const db = uniCloud.database();
	/**
	 * 首页主分类，
	 * 一行显示,二行显示
	 */
	export default {
		data() {
			return {
				firstGoods: {},
				secondGoods: {},
				dataList: [],
				goods: {},
				bgStyle: "",
				isItemClick: false,
				options: {
					checkLocation: false,
					display: "default",
					mode: "one_rows",
					className: "",
					bgClassName: "",
					itemClassName: "",
					withTitle: false,
					hasCart: false,
					headerUnderLine: false,
					headerTitle: "",
					width: 716,
					height: 300,
					loadmore: false,
					loading: false,
					image_size: "260x260",
					page_size: 20,
					scrollY: false
				},
			}
		},
		props: {
			configs: {
				type: Object,
				default: () => {
					return {

					}
				}
			},
			condition: {
				type: String,
				default: ""
			},
			withSku: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			configs(newVal) {
				console.log("watch configs ", newVal)
				this.options = Object.assign(this.options, {
					...newVal
				})
			}
		},
		computed: {
			where() {
				let conditions = ["parent_id==''"];
				// if (this.configs && this.configs.condition) {
				// 	conditions.push(`(${this.configs.condition})`)
				// }
				// if (this.condition) {
				// 	conditions.push(`(${this.condition})`)
				// }
				console.log("conditions", conditions)
				return conditions.join(" && ")
			},
			orderby() {
				if (this.options && this.options.order) {
					return this.options.order;
				}
				return "last_modify_date desc"
			}
		},
		created() {
			if (this.configs) {
				console.log("自定义组件 this.configs", this.configs)
				//动态读取
				this.options = Object.assign(this.options, {
					...this.configs
				})
			}
			this.setBg();
			this.loadData()
		},
		methods: {
			bgClick() {
				if (!this.isItemClick && this.options.top_url) {
					console.log("bg click")
					this.navTo(this.options.top_url)
				}
			},
			async loadData() {
				console.log("goods layout where", this.where)
				// let {
				// 	result
				// } = await db.action("goods_miaosha,goods_member").collection("opendb-mall-goods").where(this.where)
				// 	.field(
				// 		"goods_sn,name,keywords,miaosha,shop_id,goods_thumb,price,goods_banner,market_price,sku_name,is_vip,remain_count,month_sell_count,total_sell_count,comment_count,is_real,is_on_sale,is_alone_sale,is_best,is_new,is_hot,add_date,last_modify_date,use_score,use_score_rate"
				// 	).orderBy(this.orderby).limit(this.options.page_size).get()
				let {
					result
				} = await db.collection("tian-mall-categories").where(this.where).field(
					"_id,name,icon"
				).orderBy('last_modify_date desc').limit(6).get()
				//处理图片尺寸 | thumbImg('80x80')
				result.data.forEach(item => {
					//最多30个字
					item.name = item.name ? item.name.substr(0, 30) : "";
					item.icon=item.icon?item.icon:'/static/errorImage.jpg'
					let size = this.configs.image_size || '260x260';
					let [width, height] = size.split("x");
					item.goods_style = `width:${width}rpx;height:${height}rpx;`
					item.goods_thumb = this.$thumbImg(item.goods_thumb, size);
					// item.hasCart = this.options.hasCart && !!item.is_real;
				})
				// if (this.options.mode == 'mode_1_3') {
				// 	//提取存在goods_banner作为第一张图
				// 	let banners = result.data.filter(e => e.goods_banner);
				// 	if (banners.length > 0) {
				// 		//随机一条
				// 		this.firstGoods = banners[parseInt(Math.random() * banners.length)];
				// 		//从原数组中删除
				// 		result.data.splice(result.data.findIndex(e => e._id == this.firstGoods._id), 1)
				// 		//banner图处理
				// 		let banner = this.firstGoods.goods_banner;
				// 		this.firstGoods.banner_path = banner.path;
				// 		this.firstGoods.style = `width:${banner.image.width}rpx;height:${banner.image.height}rpx;`
				// 	}
				// 	console.log("this.firstGoods", this.firstGoods)
				// }
				this.dataList = result.data;
				console.log("自定义组件 读取数据", result.data)
			},
			setBg() {
				if (this.options.background_img) {
					// console.log("this.options.background_img", this.options.background_img)
					this.bgStyle =
						`background-image:url(${this.options.background_img}) ; background-repeat: no-repeat;   background-size: 100%;`
				}
			},
			scrolltolower() {
				console.log("goods scrolltolower")
				//查询下一页
				if (this.configs.loadmore) {
					this.$refs.udb.loadMore()
				}
			},
			loadMore() {
				console.log("goods loadmore")
				this.$refs.udb.loadMore()
			},
			navToDetail(item) {
				this.navTo("/pages/product/list?cid=" + item._id)
			},
			openSku(item) {
				if (this.withSku) {
					this.goods = item;
					this.$refs.tianSkuPop.open();
				} else {
					this.$emit("click", item)
				}
				this.isItemClick = true;
				setTimeout(() => {
					this.isItemClick = false;
				}, 2000)
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.goods-list-container {
		background: $uni-bg-color;
		margin: 0 $uni-spacing-row-base;
		border-radius: $uni-border-radius-base;
		height: 100%;

		&.style-padding {
			background: none;
		}

		&.style-gride {
			background: none;
		}

		&.full {
			margin: 0;
			border-radius: 0;
		}
	}

	.goods-list-inner {
		overflow: hidden;
		// padding: 20rpx 26rpx;
	}

	.goods-list {
		display: flex;
		padding-bottom: 12rpx;

		.goods {
			width: 260rpx;
			margin-right: 12rpx;
			position: relative;
		}

		.miaosha-cover {
			position: absolute;
			left: 0;
			top: 0;
			width: 100rpx;
			z-index: 2;
		}

		.goods-image {
			display: inline-block;
			width: 260rpx;
			height: 260rpx;
			border-radius: 12rpx;
		}

		.goods-content {
			flex: 1;
			margin-left: 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.title {
			font-size: 24rpx;
		}


	}
</style>
